<template>
	<view class="nav-box" :style="{'height':height+'px','background':bgColor}">
		<!-- 自定义导航栏 -->
		<view class="status_bar" :style="{'height':statusBarHeight+'px'}">
			<!-- uni-ui这里是状态栏 -->
		</view>
		<!-- 胶囊位置信息 -->
		<view class="nav-main flex align-center justify-center" style="disply:flex"	:style="{height: navBarHeight+'px',lineHeight:navBarHeight+'px',background:bgTabColor}">
			<view class="nav-main-back" @click="back" v-if="backIcon">
				<uni-icons type="back" size="22" color="#000000"></uni-icons>
			</view>
			<view v-if="backIcon" style="justify-content:center;width: 444rpx;display: flex;"><text
					class="nav-main-title">{{title}}</text></view>
			<view v-else style="justify-content:center;width: 100%;display: flex;">
				<!-- 下面是更改后的样式，同样的更改地方请在本页面搜索此注释 -->
				<view class="nav-main-title" :class="{redo:tabCurrentIndex==index}" v-for="(item,index) in navList" :key="index"  @click="tabClick(index)">{{item}}</view>
				<!-- <view class="nav-main-title" v-for="(item,index) in navList" :key="index" :class="{current: tabCurrentIndex === index}" @click="tabClick(index)">{{item}}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: ""
			},
			bgTabColor: {
				type: String,
				default: "#FFFFFF"
			},
			backIcon: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "我的"
			},
			navList:{
				type:Array,
				default:[
					'推荐','报名'
				]
			},			
		},
		data() {
			return {
				//总高度
				height: 0,
				//胶囊位置信息
				menuButtonRect: {},
				//状态栏的高度
				statusBarHeight: 0,
				//导航栏的高度
				navBarHeight: 0,
				tabCurrentIndex: 0,
				
			}
		},
		created() {
			this.getHeight();
		},
		methods: {
			//获取屏幕导航栏高度
			getHeight() {
				let sysInfo = uni.getSystemInfoSync(); //状态栏的高度
				this.statusBarHeight = sysInfo.statusBarHeight;
				// 胶囊位置信息
				let rect = uni.getMenuButtonBoundingClientRect();
				this.menuButtonRect = JSON.parse(JSON.stringify(rect));
				// 导航栏高度
				let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
				this.navBarHeight = navBarHeight;
				// 自定义导航栏的高度
				this.height = sysInfo.statusBarHeight + navBarHeight;

			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//顶部tab点击
			tabClick(index){
				if(this.tabCurrentIndex==index){
					return;
				}
				this.tabCurrentIndex = index;
				// this.$emit('tabClick');//原始的
				this.$emit('tabClick',this.tabCurrentIndex);//20240510增加的后面个参数
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		// height: var(--status-bar-height);
		width: 100%;

	}
	
	.nav-main {

		// background: #FFFFFF;

		.nav-main-back {
			width: 120rpx;
			float: left;
		}

		.nav-main-title {
			color: #000000;
			font-size: 30rpx;
			margin:0rpx 24rpx;
			text-align: center;
			// 下面是更改后的样式，同样的更改地方请在本页面搜索此注释
			position: relative;
			// 下面是更改后的样式，同样的更改地方请在本页面搜索此注释
			// &.current{
			// 	background: #ffffff;
			// 	border-bottom: 2px solid #2678FF;
			// 	font-weight: bolder;
			// }
		}
		// 下面是更改后的样式，同样的更改地方请在本页面搜索此注释
		.redo::after{
			content: '';
			position: absolute;
			bottom: 0;
			left: 23%;
			width: 50%;
			/* 或者你希望的特定长度 */
			height: 2px;
			/* 边框线的高度 */
			background: #0191FF;
		}
	}
</style>